<template>
	<view>
		<map v-if="order.order_status.value == 10" id="map1" :longitude="longitude" :latitude="latitude"
			:markers="markers" :polyline="polyline" scale="13" zIndex="0">
		</map>
		<scroll-view scroll-y :class="order.order_status.value == 10?'scroll':'scroll2'">
			<view class="header" :class="order.order_status.value > 10?'hm-border-b':''"
				:style="{backgroundColor:'rgba(255, 255, 255, '+slideHeight+')'}">
				<view class="title">
					<!-- #ifndef MP-ALIPAY -->
					<view @click="back" class="return">
						<view class="icons">
							<u-icon name="arrow-left" size="20" bold></u-icon>
						</view>
					</view>
					<!-- #endif -->
					<text>{{order.order_mode.text}}</text>
				</view>
			</view>
			<view class="content">
				<view class="body">
					<!-- 订单状态 -->
					<view class="hm-p-lr-20 hm-bg-f hm-br-18 hm-m-t-20">
						<view class="hm-p-t-20">
							<view class="address-left">
								<view class="hm-m-t-20">
									<view class="icons fa">发</view>
								</view>
								<view class="overturn">
									<view class="icons">
										<u-icon name="arrow-downward" size="20" bold></u-icon>
									</view>
								</view>
								<view>
									<view class="icons shou">收</view>
								</view>
							</view>
							<view class="address-right">
								<view class="detail u-line-1">{{order.address.address}}</view>
								<view class="phone hm-p-b-25">{{order.address.name}}（{{order.address.gender.text}}）{{order.address.phone}}</view>
								<view class="detail u-line-1 hm-p-t-25 hm-border-t">{{order.address.user_address}}</view>
								<view class="phone hm-p-b-25">{{order.address.user_name}}（{{order.address.user_gender.text}}）{{order.address.user_phone}}</view>
							</view>
						</view>
						<!-- 进行中订单状态 -->
						<view class="hm-p-tb-40 hm-text-center hm-border-t hm-col-content">
							<view v-if="order.order_status.value == 10">
								<u-steps :current="steps_index" activeColor="#ff6900" dot>
									<u-steps-item :title="steps[0].title" :desc="steps[0].desc"></u-steps-item>
									<u-steps-item :title="steps[1].title" :desc="steps[1].desc"></u-steps-item>
									<u-steps-item :title="steps[2].title" :desc="steps[2].desc"></u-steps-item>
									<u-steps-item :title="steps[3].title" :desc="steps[3].desc"></u-steps-item>
									<u-steps-item :title="steps[4].title" :desc="steps[4].desc"></u-steps-item>
								</u-steps>
							</view>
							<view v-if="order.order_status.value == 20" class="order-status">
								<view class="icons">
									<u-icon name="close-circle-fill" size="50" color="#fa3534"></u-icon>
								</view>
								订单{{order.order_status.text}}
							</view>
							<view v-if="order.order_status.value == 30" class="order-status">
								<view class="icons">
									<u-icon name="checkmark-circle-fill" size="50" color="#19be6b"></u-icon>
								</view>
								订单{{order.order_status.text}}
							</view>
						</view>
						<!-- 骑手信息 -->
						<view v-if="order.delivery_status.value > 10" @click="phone(order.rider.phone)"
							class="hm-p-tb-40 hm-border-t">
							<image style="width: 80rpx;height: 80rpx;" class="hm-br-b50 hm-fl hm-m-r-10"
								:src="order.rider.avatar.url"></image>
							<view class="hm-dis-block-inline hm-font-26">
								<view class="hm-p-l-10">{{order.rider.name}}</view>
								<view class="hm-p-t-10">
									<u-rate value="5" activeColor="#FF6900" inactiveColor="#999" allowHalf></u-rate>
								</view>
							</view>
							<view class="hm-dis-block-inline hm-fr hm-m-t-20">
								<u-icon name="phone-fill" size="30" color="#444"></u-icon>
							</view>
						</view>
						<!-- 订单操作 -->
						<view v-if="order.order_status.value == 10" class="hm-text-center hm-border-t hm-col-content">
							<view v-if="order.delivery_status.value == 10" class="hm-dis-block-inline hm-p-tb-20">
								<u-button @click="cancel(order_id)" text="取消订单">
								</u-button>
							</view>
							<view v-if="order.pay_status.value == 10" class="hm-m-l-20 hm-dis-block-inline hm-p-tb-20">
								<u-button @click="payOrder()" color="#FF6900" text="立即付款">
								</u-button>
							</view>
							<view v-if="order.delivery_status.value==50 && order.receipt_status.value == 10"
								class="hm-m-l-20 hm-dis-block-inline hm-p-tb-20">
								<u-button @click="receipt(order_id)" color="#FF6900" text="确认完成"></u-button>
							</view>
						</view>
					</view>

					<!-- 订单费用 -->
					<view class="hm-p-lr-20 hm-bg-f hm-br-18 hm-m-t-20 hm-font-26">
						<view v-if="order.weight_price>0" class="hm-p-tb-20 hm-border-b hm-col-tips">
							超重费用
							<text class="hm-col-main hm-fr">+￥{{order.weight_price}}</text>
						</view>
						<view v-if="order.insured_price>0" class="hm-p-tb-20 hm-border-b hm-col-tips">
							保价费用
							<text class="hm-col-main hm-fr">+￥{{order.insured_price}}</text>
						</view>
						<view v-if="order.return_price>0" class="hm-p-tb-20 hm-border-b hm-col-tips">
							返程费用
							<text class="hm-col-main hm-fr">+￥{{order.return_price}}</text>
						</view>
						<view v-if="order.activity_price>0" class="hm-p-tb-20 hm-border-b hm-col-tips">
							优惠金额
							<text class="hm-col-main hm-fr">-￥{{order.activity_price}}</text>
						</view>
						<view v-if="order.refund_price.value>0" class="hm-p-tb-20 hm-border-b hm-col-tips">
							退款金额
							<text class="hm-col-main hm-fr">-￥{{order.refund_price}}</text>
						</view>
						<view class="hm-p-tb-20 hm-border-b hm-font-28">
							{{order.pay_status.value==10?'应付':'实付'}}金额
							<text class="hm-fr">
								<text v-if="order.total_price > order.pay_price"
									class="hm-font-zhx hm-p-r-10 hm-col-tips">￥{{order.total_price}}</text>
								<text class="hm-col-error">￥{{order.pay_price}}</text>
							</text>
						</view>
						<view class="hm-p-tb-20 hm-text-center">
							<view class="hm-dis-block-inline">
								<u-button open-type="contact" icon="chat-fill" iconColor="#606266"
									text="联系客服"></u-button>
							</view>
						</view>
					</view>

					<!-- 订单信息 -->
					<view class="hm-p-lr-20 hm-bg-f hm-br-18 hm-m-t-20 hm-font-26">
						<view class="hm-p-tb-20  hm-border-b hm-col-tips">
							订单号码
							<text class="hm-col-tips hm-m-l-50">{{order.order_no}}</text>
							<view class="hm-dis-block-inline hm-fr">
								<u-button @click="copy(order.order_no)"
									:customStyle="{padding:'0rpx 30rpx',marginTop:'-8rpx'}" size="small"
									text="复制"></u-button>
							</view>
						</view>
						<view class="hm-p-tb-20 hm-border-b hm-col-tips">
							配送距离
							<text class="hm-col-tips hm-m-l-50">≈ {{order.distance.text}}</text>
						</view>
						<view class="hm-p-tb-20 hm-border-b hm-col-tips">
							预约时间
							<text class="hm-col-tips hm-m-l-50">{{order.start_time.text}}</text>
						</view>
						<view class="hm-p-tb-20 hm-border-b hm-col-tips">
							支付方式 <text class="hm-col-tips hm-m-l-50">{{order.pay_mode.text}}</text>
						</view>
						<view class="hm-p-tb-20 hm-border-b hm-col-tips">
							下单时间
							<text class="hm-col-tips hm-m-l-50">{{order.create_time}}</text>
						</view>
						<!-- 技术支持 -->
						<view class="hm">
							{{applet.copyright}} <text class="v">V{{applet.version}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 支付收银台 -->
		<u-popup :show="cashier_show" @close="cashier_show = false" mode="center" round="8" :closeable="true">
			<view class="hm-popup">
				<view class="hm-p-b-20 hm-border-b">在线支付</view>
				<view class="hm-p-tb-50 hm-text-center">
					<view class="hm-font-b hm-col-0">
						￥<text class="hm-font-100">{{pay_price}}</text>
					</view>
					<view class="hm-font-28 hm-col-content">订单支付</view>
				</view>
				<!-- #ifdef H5 || MP-WEIXIN -->
				<view v-if="mp=='weixin'||mp=='other'" class="hm-p-20 hm-border-t hm-font-26" @click="setPay(1)">
					<view class="hm-dis-block-inline hm-m-r-15">
						<u-icon name="weixin-circle-fill" size="20" color="#19be6b"></u-icon>
					</view>
					微信
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==1" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 || MP-ALIPAY -->
				<view v-if="mp=='alipay'||mp=='other'" class="hm-p-20 hm-border-t hm-font-26" @click="setPay(4)">
					<view class="hm-dis-block-inline hm-m-r-15">
						<u-icon name="zhifubao-circle-fill" size="20" color="#2979ff"></u-icon>
					</view>
					支付宝
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==4" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<!-- #endif -->
				<view class="hm-p-20 hm-border-t hm-font-26" @click="setPay(2)">
					<view class="hm-m-r-15 hm-dis-block-inline">
						<u-icon name="red-packet-fill" size="20"
							:color="Number(userInfo.money) < Number(pay_price)?'#c0c4cc':'#FF6900'"></u-icon>
					</view>
					<text :class="Number(userInfo.money) < Number(pay_price)?'hm-col-light':''">
						余额(<text
							:class="Number(userInfo.money) < Number(pay_price)?'':'hm-col-error'">￥{{userInfo.money}}</text>)
					</text>
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==2" size="25" color="#fa3534"></u-icon>
						<text v-if="Number(userInfo.money) < Number(pay_price)" class="hm-col-light">余额不足</text>
					</view>
				</view>
				<view class="hm-border-t hm-p-t-50">
					<view class="hm-p-lr-b25">
						<u-button shape="circle" color="#ff6900" @click="payment" text="确认支付"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 快捷导航 -->
		<shortcut></shortcut>
	</view>
</template>

<script>
	let App = getApp();
	export default {
		data() {
			return {
				order_id: null,
				userInfo: {},
				order: {},
				applet: {},
				mp: '', //平台类型
				slideHeight: false,
				intervalID: null, //定时器ID

				//地图参数
				markers: null, //标记点
				polyline: null, //路线
				latitude: '', //中心纬度
				longitude: '', //中心经度

				//支付参数
				pay_mode: 1, //支付模式 1微信，2余额 3后付 4支付宝
				pay_price: 0,
				cashier_show: false,

				steps: [{
						title: '订单付款',
						desc: ' '
					},
					{
						title: '骑手接单',
						desc: ' '
					},
					{
						title: '到达取点',
						desc: ' '
					},
					{
						title: '开始配送',
						desc: ' '
					},
					{
						title: '已送达',
						desc: ' '
					}
				], //订单步骤
				steps_index: -1, //起点位置
			};
		},
		props: {},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;
			_this.order_id = options.id;
			_this.applet = App.getApplet();
			_this.getOrderDetail();
			_this.getUserDetail();
			// #ifdef MP-WEIXIN
			_this.mp = 'weixin';
			// #endif
			// #ifdef MP-ALIPAY
			_this.mp = 'alipay';
			_this.pay_mode = 4;
			// #endif
			// #ifdef H5
			_this.mp = uni.getStorageSync('browser') || '';
			if (_this.mp == 'alipay') {
				_this.pay_mode = 4;
			}
			// #endif
			_this.intervalID = setInterval(() => {
				_this.getOrderDetail();
			}, 20000); //20秒钟执行一次
		},
		onPageScroll(e) {
			let _this = this;
			// 页面滚动触发事件的处理函数
			const slideHeight = parseFloat(e.scrollTop.toFixed(0)); // 滑动距离
			if (_this.order.order_status.value == 10) {
				if (slideHeight >= 50) {
					this.slideHeight = 1;
				} else {
					if (slideHeight <= 5) {
						this.slideHeight = 0;
					} else {
						let h = slideHeight / 50;
						this.slideHeight = parseFloat(h.toFixed(1))
					}
				}
			} else {
				_this.slideHeight = 1;
			}
		},
		beforeUnmount() {
			let _this = this;
			_this.clearTimer(); //关闭定时器
		},
		methods: {
			/**
			 * 关闭定时器
			 */
			clearTimer() {
				let _this = this;
				if (_this.intervalID) {
					clearInterval(_this.intervalID);
					_this.intervalID = null;
				}
			},
			/**
			 * 获取订单详情
			 */
			getOrderDetail: function() {
				let _this = this;
				App._get('user.order/detail', {
					order_id: _this.order_id
				}, function(result) {
					let start = [],
						receive = [],
						icons = [],
						order = result.data;
					_this.order = order;
					//判断是否配送中
					if(order.order_status.value == 10 && order.delivery_status.value == 20){
						//骑手未结单
						if (order.delivery.delivery_status.value == 10) {
							start = order.address.lat_lng.split(',');
							receive = order.address.user_lat_lng.split(',');
							icons = ['/static/fa.png', '/static/shou.png'];
						}
						//骑手已结单->取件
						if (order.delivery.delivery_status.value == 20 && order.delivery.delivery_status.value == 30) {
							start = order.rider.lat_lng.split(',');
							receive = order.address.lat_lng.split(',');
							icons = ['/static/rider.png', '/static/fa.png'];
						}
						//开送配送/已送达
						if (order.delivery.delivery_status.value == 40) {
							start = order.rider.lat_lng.split(',');
							receive = order.address.user_lat_lng.split(',');
							icons = ['/static/rider.png', '/static/fa.png'];
						}
					}else{
						_this.slideHeight = 1;
						_this.clearTimer(); //关闭定时器
						start = order.address.lat_lng.split(',');
						receive = order.address.user_lat_lng.split(',');
						icons = ['/static/fa.png', '/static/shou.png'];
					}
					_this.latitude = start[0];
					_this.longitude = start[1];
					_this.markers = [{
						id: 1,
						latitude: start[0],
						longitude: start[1],
						iconPath: icons[0],
						width: 40,
						height: 40,
					}, {
						id: 2,
						latitude: receive[0],
						longitude: receive[1],
						iconPath: icons[1],
						width: 40,
						height: 40,
					}];
					_this.polyline = [{
						points: [{
								latitude: start[0],
								longitude: start[1],
							},
							{
								latitude: receive[0],
								longitude: receive[1],
							}
						],
						color: '#19be6b',
						width: 5,
					}];
					let mapContext = uni.createMapContext('map1'); //地图
					//中心点偏移
					mapContext.setCenterOffset({
						offset: [0.4, 0.25]
					});
					
					//进行中订单计算步骤
					//是否已付款
					if (order.pay_status.value == 20) {
						_this.steps_index = 0;
						_this.steps[0].desc = uni.$u.timeFormat(order.pay_time,
							'hh:MM');
						if(order.delivery_status.value > 10){
							if (order.delivery.delivery_status.value > 10) {
								_this.steps_index = 1;
								_this.steps[1].desc = uni.$u.timeFormat(order.delivery.delivery_time,
									'hh:MM');
								if (order.delivery_status.value > 20) {
									_this.steps_index = 2;
									_this.steps[2].desc = uni.$u.timeFormat(order.delivery.delivery_time,
										'hh:MM');
									if (order.delivery_status.value > 30) {
										_this.steps_index = 3;
										_this.steps[3].desc = uni.$u.timeFormat(order.delivery.delivery_time,
											'hh:MM');
										if (order.delivery_status.value > 40) {
											_this.steps_index = 4;
											_this.steps[4].desc = uni.$u.timeFormat(order.delivery_time,
												'hh:MM');
										}
									}
								}
							}
						}
					}
				});
			},
			/**
			 * 取消订单
			 */
			cancel: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "您确认要取消订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('user.order/cancel', {
								order_id
							}, function(result) {
								_this.getOrderDetail();
							});
						}
					}
				});
			},
			/**
			 * 确认收货
			 */
			receipt: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "您确认要完成订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('user.order/receipt', {
								order_id
							}, function(result) {
								_this.getOrderDetail();
							});
						}
					}
				});
			},
			/**
			 * 获取当前用户信息
			 */
			getUserDetail() {
				let _this = this;
				App._get('user/detail', {}, result => {
					_this.userInfo = result.data;
				});
			},
			/**
			 * 设置支付方式
			 */
			setPay(e) {
				let _this = this;
				//如果是余额支付
				if (e == 2) {
					if (_this.userInfo.money < Number(_this.pay_price)) {
						return false;
					}
				}
				_this.pay_mode = e;
			},
			/**
			 * 支付框
			 */
			payOrder: function() {
				let _this = this;
				_this.getUserDetail();
				_this.pay_price = _this.order.pay_price;
				_this.cashier_show = true;
			},

			/**
			 * 发起付款
			 */
			payment: function() {
				let _this = this;
				let formData = {
					order_id: _this.order_id,
					pay_mode: _this.pay_mode,
				};
				// #ifdef H5
				formData.browser = _this.mp;
				// #endif
				let callback = function(result) {
					_this.cashier_show = false; //关闭结算框
					//如果支付未成功
					if (result.code === -10) {
						App.showError(result.msg, function() {
							_this.getOrderDetail();
						});
						return false;
					}
					// 发起余额支付
					if (_this.pay_mode == 2) {
						App.showSuccess('下单成功', function() {
							_this.getOrderDetail();
						});
						return true;
					}
					// 发起微信支付
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						timeStamp: result.data.payment.timeStamp,
						nonceStr: result.data.payment.nonceStr,
						package: result.data.payment.package,
						signType: result.data.payment.signType,
						paySign: result.data.payment.paySign,
						success: function(res) {
							App.showSuccess('支付成功', function() {
								_this.getOrderDetail();
							});
						},
						fail: function(res) {
							let msg = '支付失败';
							if (res.errMsg == 'requestPayment:fail cancel') {
								msg = '用户取消支付';
							}
							App.showError(msg, function() {
								_this.getOrderDetail();
							});
						}
					});
					//#endif
					//#ifdef H5
					//微信支付
					if (_this.pay_mode == 1) {
						if (_this.mp == 'weixin') {
							WeixinJSBridge.invoke('getBrandWCPayRequest', {
								'appId': result.data.payment.appId,
								'timeStamp': result.data.payment.timeStamp,
								'nonceStr': result.data.payment.nonceStr,
								'package': result.data.payment.package,
								'signType': result.data.payment.signType,
								'paySign': result.data.payment.paySign
							}, function(res) {
								let msg = '支付成功';
								if (res.err_msg === 'get_brand_wcpay_request:ok') {
									//支付成功
									App.showSuccess('支付成功', function() {
										_this.getOrderDetail();
									});
									return true;
								} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
									msg = '用户取消支付';
								} else if (res.err_msg === 'get_brand_wcpay_request:fail') {
									msg = '支付失败';
								}
								App.showError(msg, function() {
									_this.getOrderDetail();
								});
							});
						}
						if (_this.mp == 'other') {
							document.location.href = result.data.payment;
						}
					}
					//支付宝支付
					if (_this.pay_mode == 4) {
						const div = document.createElement('div');
						div.innerHTML = result.data.payment;
						document.body.appendChild(div);
						document.forms['alipaysubmit'].submit();
					}
					//#endif
					// #ifdef MP-ALIPAY
					uni.requestPayment({
						orderInfo: result.data.payment.trade_no,
						success: function(res) {
							if (res.resultCode != '9000') {
								App.showError(res.memo);
								return false;
							}
							App.showSuccess('支付成功', function() {
								_this.getOrderDetail();
							});
						}
					});
					//#endif
				};
				//验证是否支持后付款
				uni.showLoading({
					title: '正在处理...'
				});
				App._post_form('user.order/payment', formData, function(result) {
					callback(result);
				});
			},
			/**
			 * 拨打电话
			 */
			phone: function(phone) {
				let _this = this;
				if (_this.order.order_status.value > 10) {
					App.showError('订单' + _this.order.order_status.text + '，不可拨打电话！');
					return false;
				}
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			/**
			 * 返回上一页
			 */
			back: function() {
				let _this = this;
				_this.clearTimer(); //关闭定时器
				uni.navigateBack();
			},
			/**
			 * 复制
			 */
			copy: function(str) {
				wx.setClipboardData({
					data: str,
					success(res) {}
				})
			},
			goTo: function(url) {
				App.goTo(url);
			}
		}
	};
</script>
<style lang="scss" scoped>
	map {
		width: 750rpx;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}

	.header {
		position: fixed;
		display: flex;
		left: 0rpx;
		top: 0rpx;
		height: 180rpx;
		width: 100%;
		z-index: 9999;

		.title {
			width: 100%;
			margin-top: 90rpx;
			text-align: center;
			line-height: 100rpx;

			text {
				margin-left: -150rpx;
			}

			.return {
				display: inline-block;
				height: 70rpx;
				width: 70rpx;
				background-color: #fff;
				border-radius: 50%;
				float: left;
				margin-top: 30rpx;
				margin-left: 40rpx;

				.icons {
					float: left;
					margin: 15rpx 0rpx 0rpx 12rpx;
				}
			}
		}
	}

	.scroll {
		width: 100%;
		height: 100%;
		padding-top: 650rpx;

		.content {
			background-color: #f3f4f6;
			padding: 0rpx 20rpx;
			margin-top: 80rpx;

			.body {
				position: relative;
				top: -80rpx;
			}
		}
	}

	.scroll2 {
		width: 100%;
		height: 100%;
		padding-top: 180rpx;

		.content {
			padding: 0rpx 20rpx;
		}
	}

	.order-status {
		height: 150rpx;
		line-height: 150rpx;
		display: inline-block;
		color: #000000;
		font-weight: 900;

		.icons {
			display: inline-block;
			float: left;
			margin-top: 20rpx;
			margin-right: 20rpx;
		}
	}
</style>